<template>
  <div class="bg">
    <div class="no-login" v-if="ifLo">
      <h2>未登录</h2>
      <router-link to="/login">
        <van-button round type="info">点击登录</van-button>
      </router-link>
    </div>
    <div class="title">
      <div class="add">
        <div class="text">我的成绩</div>
        <router-link to="/addScore" v-if="!ifLo">
          <img :src="addSrc" alt="" style="width: 40px; height: 40px"
        /></router-link>
      </div>
      <p class="tips" v-if="ifMs">（暂无成绩请点击右上角添加成绩）</p>
    </div>
    <div id="main" v-if="!ifMs"></div>
    <div class="change" >
      <van-button round :icon="leftSrc" type="default" @click="del" v-show="le"> </van-button>
      <van-button round :icon="rightSrc" type="default" @click="add" v-show="ri"> </van-button>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import axios from "axios";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
]);
export default {
  data() {
    return {
      ifLo: false,
      addSrc: require("../assets/images/add.png"),
      leftSrc: require("../assets/images/left.png"),
      rightSrc: require("../assets/images/right.png"),
      ifMs: false,
      num:0,
      max:0,
      le:false,
      ri:false
    };
  },
  methods: {
    add(){
      if(this.num >= this.max -1){
        this.num = this.max;
        this.ri = false;
      } else{
        this.num ++;
        this.ri = true;
      }
      this.le = true;
      this.getMes();
    },
    del(){
      if(this.num <= 0 ){
        this.num = 0;
        this.le = false;
      } else{
        this.num--;
        this.le = true;
      }
      this.ri = true;
      this.getMes()
    },
    //获取用户名 通过用户名来判断是否处于登录状态 处于登录状态则执行getMes函数
    baseData() {
      this.ifLo = true;
      let user = this.$store.getters.getUser.name;
      // console.log(user);
      if (user != "") {
        this.ifLo = false;
        this.ri = true;
        this.le = true;
        this.getMes();
      }
    },
    //获取用户成绩信息
    getMes() {
      let userName = this.$store.getters.getUser.name;
      let data = {
        userName,
      };
      axios
        .post("http://127.0.0.1/list/checkScore", data, {
          headers: "application/x-www-form-urlencoded",
        })
        .then((res) => {
          console.log(res);
          if (res.data.data.length == 0) {
            this.ifMs = true;
            this.le = false
            this.ri = false
          } else if (res.data.data.length > 0) {
            this.max = res.data.data.length -1;
            this.ifMs = false;
            let { data } = res.data;
            console.log(this.max);
            if(this.max == 0){
              this.ri = false;
            }
            this.showTarget(data,this.num);
          }
        });
    },
    //用过用户成绩信息渲染成绩
    showTarget(mes,num) {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      console.log(mes);
      if(num == 0 ){
        this.le = false;
      }  
      else{
        this.le = true
      }
      let yuwen = mes[num].yuwen;
      let shuxue = mes[num].shuxue;
      let yingyu = mes[num].yingyu;
      let wuli = mes[num].wuli;
      let huaxue = mes[num].huaxue;
      let shengwu = mes[num].shengwu;
      let zhengzhi = mes[num].zhengzhi;
      let lishi = mes[num].lishi;
      let dili = mes[num].dili;
      let text = mes[num].active;
      let data = [
        {
          type: "bar",
          data: [
            yuwen,
            shuxue,
            yingyu,
            wuli,
            huaxue,
            shengwu,
            zhengzhi,
            lishi,
            dili,
          ],
        },
      ];
      

      option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [
            "语文",
            "数学",
            "英语",
            "物理",
            "化学",
            "生物",
            "政治",
            "历史",
            "地理",
          ],
        },
        series: [
          {
            // name: "2011",
            // type: "bar",
            // data: [145, 100, 132, 89, 36, 69, 90, 10, 80],
          },
        ],
      };
      option.title.text = text;
      option.series = data;
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.baseData();
  },
};
</script>
<style lang="less" scoped>
.bg {
  //   background-color: white;
  height: 90vh;
  width: 90vw;
  margin: 0 auto;

  .no-login {
    padding-top: 100px;
    h2 {
      margin-bottom: 100px;
    }
  }
  .title {
    .add {
      width: 100%;
      height: 60px;
      position: fixed;
      top: 0;
      right: 0;
      background: linear-gradient(to left, #29eac4, #4284db);
      img {
        position: absolute;
        right: 0;
        top: 10px;
      }
      .text {
        text-align: center;
        line-height: 60px;
        height: 60px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        font-weight: bold;
        // color:white
      }
    }
    .tips {
      padding-top: 80px;
    }
  }
  .change {
    width: 70%;
    margin: 50px auto 0;
    display: flex;
    justify-content: space-around;
  }
  #main {
    padding-top: 100px;
    // margin-left: 20px;
    width: 90vw;
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
  }
}
</style>